<template>
	<view style="position: fixed;bottom: 120rpx;left: 0;right: 0;">
		<scroll-view scroll-y="true" style="height: 300rpx;width: 520rpx;" scroll-with-animation class="pl-3"
			:scroll-into-view="scrollIntoView">
			<view :id="'chat'+item.id" class="justify-start flex align-start rounded-lg p-2 mb-2"
				style="background-color: rgba(255,255,255,0.125);" v-for="(item,index) in list" :key="index">
				<text class="font-md" style="color: #B3B3B3;">{{item.name}}:</text>
				<text class="font-md text-white">{{item.content}}</text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollIntoView: "",
				list: []
			}
		},
		mounted() {
			// let id = 1
			// setInterval(() => {
			// 	this.list.push({
			// 		id: id,
			// 		name: "大帅比" + id,
			// 		content: "我来啦!" + id,
			// 	})
			// 	this.toBottom()
			// 	id++
			// }, 1000)
		},
		methods: {
			send(data){
				this.list.push(data)
				this.toBottom()
			},
			toBottom() {
				setTimeout(() => {
					let length = this.list.length
					if (length > 0 && this.list[length - 1]) {
						this.scrollIntoView = 'chat' + this.list[length - 1].id
					}
				},500)

			}
		}
	}
</script>

<style>
</style>
